<template>
  <!-- 云盾告警-告警统计 -->
  <div class="statistics">
    <a-card>
      <a-tabs>
        <a-tab-pane class="tab-one" key="1" tab="TopN">
          <div class="row-one">
            <div class="text">TopN</div>
            <a-select class="input" placeholder="请选择">
              <a-select-option value="1">测试1</a-select-option>
              <a-select-option value="2">测试2</a-select-option>
            </a-select>
          </div>
          <a-collapse
            class="row-two"
            v-for="item in alarmList"
            :key="item"
            v-model:activeKey="activeKey"
          >
            <a-collapse-panel class="collapse-panel" :key="item" :header="item">
              <div class="card-box">
                <div class="card-item" v-for="item in 5" :key="item">
                  <div class="alarm-number">
                    <ExclamationCircleOutlined class="icon" />告警个数（15）
                  </div>
                  <div class="text">UniServer R4900 G3 172.16.1...</div>
                </div>
              </div>
            </a-collapse-panel>
          </a-collapse>
        </a-tab-pane>
        <a-tab-pane class="tab-two" key="2" tab="未恢复告警统计">
          <a-card title="增加">
            <div class="item">
              <div class="text">规则名称</div>
              <a-input class="input" placeholder="请输入"></a-input>
            </div>
            <div class="item">
              <div class="text">资源</div>
              <a-select class="input" placeholder="请选择">
                <a-select-option value="1">测试1</a-select-option>
                <a-select-option value="2">测试2</a-select-option>
              </a-select>
            </div>

            <div class="item">
              <div class="text">告警分类</div>
              <a-textarea class="input" placeholder="请输入"></a-textarea>
            </div>
            <div class="button-box">
              <a-button class="button">重置</a-button>
              <a-button type="primary">确认</a-button>
            </div>
          </a-card>
        </a-tab-pane>
        <a-tab-pane class="tab-three" key="3" tab="Trap分组">
          <div class="input-box">
            <div class="text">Trap分组</div>
            <a-textarea class="input" placeholder="请选择"></a-textarea>
            <div class="button-box">
              <div>选择</div>
              <div>删除</div>
              <div>重置</div>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>
<script setup lang="ts">
// 引入组件
// 引入方法
import { defineProps, defineEmits, watch, onMounted, ref } from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
const props = defineProps({})
const emits = defineEmits([])
// 自定义状态
const alarmList = ref([
  '全部告警',
  '紧急告警',
  '重要告警',
  '次要告警',
  '警告告警',
  '通知告警',
])
const activeKey = ref([])
onMounted(() => {
  activeKey.value = [...alarmList.value]
})
// 自定义方法
</script>
<style lang="less" scoped>
.statistics {
  .tab-one {
    .row-one {
      display: flex;
      align-items: center;
      margin-bottom: (20 / @vh);
      .text {
        margin-right: (10 / @vw);
      }
      .input {
        width: (200 / @vw);
      }
    }
    .row-two {
      margin-bottom: (20 / @vh);
      .collapse-panel {
        .card-box {
          display: flex;
          justify-content: space-between;
          .card-item {
            padding: (24 / @vh) (24 / @vw);
            width: 18%;
            color: #3d3d3d;
            font-size: (16 / @vw);
            border: 1px solid rgba(0, 0, 0, 0.06);
            border-radius: (8 / @vw);
            cursor: pointer;
            box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06);
            &:hover {
              color: @tc;
              border-color: @tc;
            }
            .alarm-number {
              margin-bottom: (10 / @vh);
              .icon {
                margin-right: (10 / @vw);
              }
            }
          }
        }
      }
    }
  }
  .tab-two {
    .item {
      display: flex;
      align-items: center;
      margin-bottom: (20 / @vh);
      .text {
        margin-right: (10 / @vw);
        width: (100 / @vw);
        text-align: right;
      }
      .input {
        // flex: 1;
        width: (500 / @vw);
      }
    }
    .button-box {
      .button {
        margin-right: (10 / @vw);
      }
    }
  }
  .tab-three {
    .input-box {
      display: flex;
      .text {
        margin-right: (10 / @vw);
        width: (100 / @vw);
        text-align: right;
      }
      .input {
        margin-right: (10 / @vw);
        width: (500 / @vw);
      }
      .button-box {
        div {
          margin-bottom: (10 / @vh);
          color: @tc;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
